<template>
    <div class="product-list">
      <!-- 筛选控件 -->
      <div class="filter-section">
        <el-select v-model="selectedCategory" placeholder="选择类别" class="select">
          <el-option
            v-for="category in categories"
            :key="category.value"
            :label="category.label"
            :value="category.value">
          </el-option>
        </el-select>
      </div>
      <!-- 产品列表 -->
      <div class="products">
        <el-row :gutter="20">
        <el-col :span="6" v-for="product in filteredProducts" :key="product.id">
          <router-link :to="`/products/${product.id}`">
            <el-card>
              <img src="../assets/p2.png" class="product-image" alt="Product image" />
              <div>
                <h3 class="product-name">{{ product.name }}</h3>
                <p class="product-description">{{ product.description }}</p>
                <div class="product-price">${{ product.price }}</div>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useProductStore } from '../stores/productStore';
  import { ref, computed } from 'vue';
  
  const productStore = useProductStore();
  productStore.fetchProducts();
  
  const selectedCategory = ref('');
  const categories = ref([
    { value: 'category1', label: '类别1' },
    { value: 'category2', label: '类别2' },
  ]);
  
  const filteredProducts = computed(() => {
    return selectedCategory.value
      ? productStore.products.filter(p => p.category === selectedCategory.value)
      : productStore.products;
  });
  </script>
<style scoped>
.product-image{
    width: 140px;
}
.select{
    float: right;
    margin-top: 8px;
}
.products{
    float: left;
    margin-top: 10px;
}
</style>
  